<template>
  <div style="width: 100%; height: 100%">
    <div v-if="pacypay">
      <!-- 顶头栏 -->
      <div class="upper">
        <div class="img">
          <button class="buttonimg" @click="buttonimg">
            <van-icon name="arrow-left" />
          </button>
          <img src="../../img/new-logo.png" alt="" class="logo" />
          <img src="../../img/makees.png" alt="" class="logo1" />
        </div>
      </div>
      <!-- 内容区 -->
      <div id="parent_div">
        <div id="child_div">
          <!-- 详细信息栏 -->
          <div
            class="information"
            v-for="data in orderList"
            :key="data.orderId"
          >
            <!-- 倒计时 -->
            <!-- {{ time ? time : "00:00s" }} -->
            <div class="timediv">
              <img src="../../img/time.png" alt="" class="countDown" />
              <span class="times"
                >Remaining payment time {{ time ? time : "00:00s" }}</span
              >
            </div>
            <!-- 虚线 -->
            <div class="linediv">
              <img src="../../img/Line.png" alt="" class="line" />
            </div>
            <!-- 对号 -->
            <div class="Orderdiv">
              <span class="Order">Order Summary</span>
            </div>
            <!-- 商品名 -->
            <div class="Productdiv">
              <span class="Product">Product Name:</span>&nbsp;
              <span class="ProductName" style="color: #000000; font-weight: 700"
                >{{ data.productName }}
              </span>
            </div>
            <!-- 单号 -->
            <div class="NOdiv">
              <span class="NO">NO:</span>
              <span class="orderId">{{ data.orderId }}</span>
            </div>
            <!-- 虚线 -->
            <div class="linediv">
              <img src="../../img/Line.png" alt="" class="line" />
            </div>
            <!-- 价钱 -->
            <div class="pricediv">
              <span class="price"
                >Price :<span style="color: #215dd4; font-weight: 700"
                  >{{ data.orderAmount | numFilter }}&nbsp;&nbsp;
                  {{ data.currency }}</span
                >
              </span>
            </div>
          </div>
        </div>
      </div>
      <!-- 支付区 -->
      <div id="pacypay_checkout" class="pacypay"></div>
      <div class="back" @click="buttonimg"><span>back</span></div>
    </div>
    <!-- 超时 -->
    <my-expired v-if="expired"></my-expired>
  </div>
</template>

<script>
import Pacypay from '@/utils/pacypay-v1.0.3'
import 'vant/lib/index.css'
import { getPingAPI } from '@/api/query'
import { newDate } from '@/utils/means'
export default {
  name: 'PacyPay',
  data () {
    return {
      card: '',
      showCard: false,
      loading: true,
      orderList: [],
      countDown: null,
      transactionId: null,
      newDate: new Date().getTime(),
      time: null,
      times: null,
      timer: null,
      show: true, // 加载遮罩层
      // 货币支付
      creditIsShow: null,
      cryptoIsShow: null,
      pacypay: true,
      expired: false// 超时
    }
  },
  created () {
    this.orderList = JSON.parse(localStorage.getItem('orderList')) // 从本地获取最新的orderList
    this.goback()
  },
  mounted () {
    this.getPacypay()
    this.show = false
    // 加载完成
    this.$nextTick(() => {
      const data = {
        orderId: this.$route.query.orderId,
        pacy_paycompleted: 'pacy_pay-Loading-completed = ' + newDate()
      }
      getPingAPI(data)
    })
    // 退出
    window.onbeforeunload = () => {
      const data = {
        orderId: this.$route.query.orderId,
        pacy_payclose: 'pacy_pay-close = ' + newDate()
      }
      getPingAPI(data)
    }
  },
  filters: {
    numFilter (value) {
      // 截取当前数据到小数点后六位
      const realVal = parseFloat(value).toFixed(6)
      return realVal
    }
  },
  methods: {
    goback () {
      // 获取后台时间戳
      this.countDown = this.orderList[0].expiresOn
      this.transactionId = this.orderList[0].transactionId
      // this.transactionId = '1544197674849067008'
      // 定时器方法
      this.countDowns()
    },
    getPacypay () {
      const transactionId = this.transactionId
      const that = this
      const _that = that
      const pacypay = new Pacypay(transactionId, { // eslint-disable-line no-unused-vars
        locale: '', // en、zh-cn
        environment: 'production', // sandbox、production
        config: {
          checkoutTheme: 'light', // light、dark
          customCssURL: '', // 自定义样式链接地址，配置该值后，checkoutTheme 则无效
          variables: {
            colorBackground: '#FFFFFF', // 主题背景色
            colorPrimary: 'red', // 主题色，如输入框高亮、光标颜色
            colorText: '#333333', // 字体颜色
            colorDanger: '#FE6868', // 错误提示颜色
            borderRadius: '10px', // 输入框角度
            fontSizeBase: '16px', // 基础字体大小，会按照该基准进行缩放
            fontFamily: 'Arial, sans-serif' // 字体样式

          },
          // 如果想自定义所有样式则只用配置styles. checkoutTheme,customCssURL,variables都可以不传
          // 详情请看styles属性说明
          styles: {
            '.pacypay-checkout__button--pay': {
              // 支付按钮样式
              'background-color': '#215DD4', // 按钮背景颜色
              'border-radius': '10px',
              height: '40px'
            },
            // '.pacypay-checkout__button--pay': { // 支付按钮样式
            //   'background-color': 'red'
            // },
            '.pacypay-checkout__input': {
              height: '32px'
            },
            '.pacypay-checkout__payment-method__name': {
              'font-size': '17px',
              'font-weight': 700
            },
            '.pacypay-checkout__payment-method': {
              'box-shadow': '2px 2px 2px #f5f5f5, -2px -2px 2px #f5f5f5',
              border: '0px solid #000',
              'padding-bottom': '3px'
            },
            '.pacypay-checkout__label-text': {
              'font-weight': 700
            }
          }
        },
        onPaymentCompleted: function (data) {
          // 成功支付后回调方法
          const txtInfo = data.data // 返回交易结果详情
          const respCode = data.respCode // 响应码
          // 响应信息respMsg
          const respMsg = data.respMsg // eslint-disable-line no-unused-vars
          if (respCode === '20000') {
            // respCode 为 20000 表示交易正常
            _that.$router.push({
              path: '/succed',
              query:
              {
                orderId: this.res.data.data.orderId,
                currency: this.res.data.data.currency,
                orderAmount: this.res.data.data.orderAmount
              }
            })
            switch (txtInfo.status // 交易状态判断
            ) {
              case 'S': // status 为 'S' 表示成功
                // 支付最终状态以异步通知结果为准
                break
              case 'R': // status 为 'R' 表示需要3ds验证
                // 当交易状态为 R 时，商户需要重定向到该URL完成部分交易，包括3ds验证
                window.location.href = txtInfo.redirectUrl
                break
            }
          } else {
            // 交易失败
            _that.$router.push({
              path: '/lose',
              query:
              {
                orderId: this.res.data.data.orderId,
                currency: this.res.data.data.currency,
                orderAmount: this.res.data.data.orderAmount
              }
            })
          }
        },
        onError: function (err) {
          // 支付异常回调方法
          console.log(err)
        }
      })
    },
    // 定时器
    countDowns () {
      // 过期字符串减去当前系统字符串/1000转换成总秒数
      this.times = Math.floor((this.countDown - this.newDate) / 1000)
      // 通过定时器实现动态倒计时,每隔1秒更新一次
      this.timer = setInterval(() => {
        this.times -= 1
        this.getTime()
        if (this.times <= 0) clearInterval(this.timer)
      }, 1000)
      if (this.times <= 0) clearInterval(this.timer)
    },
    getTime () {
      let m = parseInt(this.times / 60 % 60)
      m = m < 10 ? '0' + m : m
      let s = parseInt(this.times % 60)
      s = s < 10 ? '0' + s : s
      this.time = m + ':' + s + 's'
    },
    buttonimg () {
      this.$router.go(-1)
    }
  },
  watch: {
    times: {
      handler (val) {
        if (val <= 0) {
          const data = {
            orderId: this.$route.query.orderId,
            pacy_payJumpexpired: 'pacy_pay-Jump-expired = ' + newDate()
          }
          getPingAPI(data)
          this.pacypay = false
          this.expired = true
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
// 移动端
@media screen and (max-width: 700px) {
  // 支付盒子
  #pacypay_checkout {
    height: 11rem;
    width: 100%;
    display: block;
  }
  /* 信息栏 */
  // 加载遮罩层
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background-color: #ffffff;
  }
  .information {
    width: 95%;
    margin: 10px auto;
    border-radius: 15px;
    box-shadow: 2px 2px 2px #f5f5f5, -2px -2px 2px #f5f5f5;
  }
  .buttonimg {
    position: absolute;
    top: 20%;
    width: 10%;
    background-color: #215dd400;
    border: 0px solid #000;
    color: #fff;
  }
  .timediv {
    position: relative;
    height: 1.02564rem;
  }
  .linediv {
    position: relative;
    height: 0.5rem;
  }
  .Orderdiv {
    position: relative;
    height: 1rem;
  }
  .Productdiv {
    line-height: 14px;
    margin-left: 4%;
    margin-bottom: 10px;
  }
  .NOdiv {
    margin-left: 4%;
    padding-bottom: 4%;
  }
  .pricediv {
    position: relative;
    height: 1rem;
  }
  .price {
    position: absolute;
    left: 4%;
    float: right;
    font-size: 0.38026rem;
    color: #999999;
  }
  .Product {
    // position: absolute;
    display: block;
    font-size: 0.38026rem;
    color: #999999;
    float: left;
  }
  .NO {
    font-size: 0.39026rem;
    color: #999999;
  }
  .Order {
    position: absolute;
    left: 4%;
    font-size: 0.42026rem;
    font-weight: 700;
  }
  .upper {
    position: relative;
    width: 100%;
    height: 1.15385rem;
    margin: 0 auto;
    background-color: #215dd4;
  }
  .logo {
    width: 20%;
    height: 0.64103rem;
    margin-top: 0.25641rem;
    margin-left: 38%;
  }
  .logo1 {
    display: none;
  }
  .img {
    padding-top: 1px;
  }
  .succeed {
    background-color: red;
    z-index: 99;
  }
  .ProductName {
    font-size: 0.36026rem;
    display: inline-block;
    word-break: break-all;
    // float: right;
    font-weight: 700;
    width: 50%;
    // margin: 0 auot;
    // word-wrap: break-word;
    // word-break: normal;
    // padding-left: 40%;
    vertical-align: top;
  }
  .orderId {
    font-size: 0.36026rem;
    padding-left: 2%;
    font-weight: 700;
  }
  .orderAmount {
    position: absolute;
    top: 3%;
    left: 13%;
    float: right;
    font-size: 0.36026rem;
    margin-left: 0.38462rem;
    color: #215dd4;
    font-weight: 700;
  }
  .countDown {
    position: absolute;
    top: 28.3%;
    left: 21%;
    width: 4%;
  }
  .times {
    color: #f2ae2b;
    font-size: 0.27462rem;
    position: absolute;
    top: 28%;
    left: 26%;
    font-weight: 700;
  }
  .line {
    width: 95%;
    position: absolute;
    left: 2%;
  }
  .back {
    display: none;
  }
}
// PC端
@media screen and (min-width: 700px) {
  // 支付盒子
  .pacypay {
    height: 3rem !important;
    width: 81%;
    margin: 0 auto;
  }
  // 加载遮罩层
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background-color: #ffffff;
  }
  /* 信息栏 */
  .information {
    width: 80%;
    position: relative;
    box-shadow: 0 0.02856rem 0.08128rem #e9e5e5;
    border-radius: 0.12821rem;
    margin: 0.12821rem auto;
  }
  .back {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 3%;
    span {
      width: auto;
      height: 100%;
      color: #215dd4;
    }
  }
  .buttonimg {
    display: none;
  }
  .timediv {
    position: relative;
    height: 0.33333rem;
    float: right;
    width: 50%;
  }
  .linediv {
    display: none;
  }
  .Orderdiv {
    position: relative;
    height: 0.25rem;
  }
  .Productdiv {
    margin-left: 2%;
    margin-top: 2%;
    padding-bottom: 1%;
  }
  .NOdiv {
    margin-left: 2%;
    padding-bottom: 2%;
  }
  .pricediv {
    position: relative;
    height: 0.28rem;
    float: right;
    width: 50%;
  }
  .price {
    position: absolute;
    right: 5%;
    top: -100%;
    float: right;
    font-size: 0.11821rem;
    color: #999999;
  }
  .Product {
    position: absolute;
    display: inline-block;
    font-size: 0.11821rem;
    color: #999999;
  }
  .NO {
    font-size: 0.11821rem;
    color: #999999;
  }
  .Order {
    position: absolute;
    left: 2%;
    top: 34%;
    font-size: 0.13rem;
    font-weight: 700;
  }
  .upper {
    width: 100%;
    height: 0.32rem;
    margin: 0 auto;
    background-color: #215dd4;
  }
  .logo {
    height: 0.19rem;
    width: 6.5%;
    margin-left: 10%;
    margin-top: 0.075rem;
  }
  .logo1 {
    height: 0.15rem;
    width: 13%;
    margin-left: 0.5%;
    margin-bottom: 0.025rem;
  }
  .button {
    width: 4%;
    position: absolute;
    top: 5%;
    left: 5%;
  }
  .ProductName {
    font-size: 0.10821rem;
    display: inline-block;
    width: 60%;
    font-weight: 700;
    word-wrap: break-word;
    word-break: normal;
    padding-left: 12%;
    vertical-align: top;
  }
  .orderId {
    font-size: 0.10821rem;
    font-weight: 700;
    padding-left: 2%;
  }
  .orderAmount {
    position: absolute;
    left: 4%;
    top: -97%;
    float: right;
    font-size: 0.10821rem;
    margin-left: 0.38462rem;
    color: #215dd4;
    font-weight: 700;
  }
  .countDown {
    position: absolute;
    top: 30%;
    right: 43%;
    width: 3%;
  }
  .times {
    color: #f2ae2b;
    font-size: 0.09821rem;
    position: absolute;
    top: 33%;
    right: 3%;
    font-weight: 700;
  }
  // 虚线
  .line {
    width: 95%;
    position: absolute;
    left: 2%;
    display: none;
  }
}
</style>
